Day-6 我流 react 開發環境

到底要先分享我常拿來偷懶的網頁工具或好用標籤，還是要直接開幹一個 side project，考慮許久，我決定先來做 side project，從第六天開始，估計需要 15 天左右能結束(希望可以啦 XD)。

緣起

工作的時候比較少碰到需要做「發想」這件事情的時候，通常都是已經有要做的專案，需求方那邊也早就已經開好需求，作為執行者要跟著需求走，時刻確認好需求，以防做了很多才發現需求方不要這樣，或者需求已經改動卻沒有通知到的狀況。

接下來我會實際建立一個新開發環境，跟大家分享製作過程。

開發者體驗

使用者的體驗非常的重要，這是真的，我們所做的 web app，就是為了要服務使用者而誕生的。使用者體驗固然重要，但別忘了要為自己想一下，嘗試優化自己的開發體驗。

這陣子我常在想，如果開發過程卡卡，自己都很難做事了，要如何才能端出好的專案成果來讓使用者覺得好用呢，畢竟連自己的體驗都不照顧了，還會去管使用者嗎？

不舒服的事情包括 :超級大包的 package 每次都下載好久...設計稿的元素一直點不到...建立 CRA 好的專案有的時候因為 web pack 更新，產生斷層，在網路上找解法就花了兩個小時...老闆或主管要我直接開幹一個系統，到中間才叫設計來幫忙做美化，導致套完的版要整組拆掉重套...

也許，有些事真的很難避免，至少在沒有被限制的地方，盡情地為自己的開發者體驗著想吧。

建立新專案

在接下來的建立專案裡面，我會按造 CRA 的官方文件說明，
來操作。

首先，因為我要用 typescript ，就直接用 typescript 的模板，先建立一個專案。

npx create-react-app new-a-app --template typescript

套件管理工具 pnpm

我用的套件管理工具是 pnpm，為什麼我想用它，主要有三個原因，2 第一，用 npm 的時候卡住的次數太多了，npm 的文件的文學造詣太高了...我看不懂，總是要在網路上面找解決辦法，不如直接換掉它...

第二，pnpm 我覺得體感上安裝有比較快一點。

第三，pnpm 的 console 我覺得看起來比較舒服。

以上原因可以看出，因為換上 pnpm 讓心情變得比較好，所以我寧可多麻煩一點，把預設的 npm 改成 pnpm。

以下是把 npm 改裝成 pnpm 的步驟

• 刪除 node_modules
• 刪除 package-lock
• pnpm i 安裝依賴項

整理 package.js

安裝完 CRA 之後，打開 package.json，會看到 dependencies，幫你裝好很多東西了，其實裡面有一些東西是只有開發的時候才用的到，就把它移駕到 devDependencies，我做這件事情的原因是因為不喜歡 dependencies 很長，雖然開發久了還是會很長，但我會盡早請 devDependencies 來分擔列表長度，像這樣 :

pnpm i @testing-library/jest-dom @testing-library/react @testing-library/user-event @types/jest @types/node @types/react @types/react-dom typescript web-vitals -D

個人很討厭 package 裝一大堆沒用到的東西，定時都會清理，像這樣 :

pnpm remove @headlessui/react

結語

這篇文章簡單的提到建立新專案的方式，這也是我平常工作時會用的模式，我個人很重視專案架構的整齊程度，也很在意 package 裡面有沒用到的套件，安裝包的時候的速度也影響我的心情，所以我才會做出以上的調整。

自己是最了解自己重視的事，所以自己的開發體驗只有自己能優化，沒有人能為自己做這件事。優化使用者體驗之前，可以先嘗試優化自己的開發者體驗。